<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流加载</title>
    <!--
        浏览器加载页面元素，默认情况下是按照从上到下，从左到右顺序来进行加载的
        前面的空间位置如果被占了，后面的元素只能去占剩下空间的位置
        默认的流加载机制我们称之为标准流加载机制
        div默认属于块级标签(独占一行，可以设置宽高)
        a属于行内标签(不独占一行，不能设置宽高)
        块级标签按照从上到下，行内标签是按照从左到右顺序进行加载的
        display: 设置标签的特性  inline(行内特性) block(块级特性) inline-block(行内块特性) none(隐藏特性)
    -->
    <style>
        .one {
            height: 100px;
            width: 100px;
            border: 1px solid red;
            display: inline;
        }
        .aOne {
            height: 100px;
            width: 100px;
            border: 1px solid black;
            margin: 30px;
            /*块级标签 block*/
            /*inline-block 满足行内的特性  不独占一行
              block   块级  可以设置宽高
            */
            display: inline-block;
        }
        .img {
            height: 300px;
            width: 300px;
        }

        #img2  {
            display: none;/*隐藏,不显示*/
        }

    </style>
</head>
<body>
    <div class="one">这是第一个div</div>
    <div class="two">这是第二个div</div>
    <a class="aOne" href="">百度一下</a>
    <a href="">必应</a>
    <img class="img" src="../1.jpg" alt="">
    <img class="img" id="img2" src="../1.jpg" alt="">
</body>
</html>